<script setup>
import {reactive} from "vue";
import {userStore} from '@pi/user';

let user = userStore();
let list = reactive([[
    {path: '/index/home', label: '个人中心', icon: new URL('/src/assets/icon/home.png', import.meta.url).href},
    {path: '/index/chamber', label: '宿舍管理', icon: new URL('/src/assets/icon/chamber.png', import.meta.url).href},
    {path: '/index/ca', label: '宿管员', icon: new URL('/src/assets/icon/admin.png', import.meta.url).href},
    {path: '/index/student', label: '学生管理', icon: new URL('/src/assets/icon/student.png', import.meta.url).href},
    {path: '/index/notice', label: '公告管理', icon: new URL('/src/assets/icon/notice.png', import.meta.url).href},
    {path: '/index/task', label: '考勤管理', icon: new URL('/src/assets/icon/task.png', import.meta.url).href},
    {path: '/index/health', label: '卫生管理', icon: new URL('/src/assets/icon/health.png', import.meta.url).href},
], [
    {path: '/index/home', label: '个人中心', icon: new URL('/src/assets/icon/home.png', import.meta.url).href},
    {path: '/index/chamber', label: '宿舍管理', icon: new URL('/src/assets/icon/chamber.png', import.meta.url).href},
    {path: '/index/notice', label: '公告管理', icon: new URL('/src/assets/icon/notice.png', import.meta.url).href},
    {path: '/index/task', label: '考勤管理', icon: new URL('/src/assets/icon/task.png', import.meta.url).href},
    {path: '/index/upkeep', label: '维修上报', icon: new URL('/src/assets/icon/upkeep.png', import.meta.url).href},
    {path: '/index/health', label: '卫生管理', icon: new URL('/src/assets/icon/health.png', import.meta.url).href},
], [
    {path: '/index/home', label: '个人中心', icon: new URL('/src/assets/icon/home.png', import.meta.url).href},
    {path: '/index/notice', label: '公告列表', icon: new URL('/src/assets/icon/notice.png', import.meta.url).href},
    {path: '/index/task_do', label: '考勤任务', icon: new URL('/src/assets/icon/task.png', import.meta.url).href},
    {path: '/index/upkeep', label: '维修上报', icon: new URL('/src/assets/icon/upkeep.png', import.meta.url).href},
    {path: '/index/health', label: '卫生评分', icon: new URL('/src/assets/icon/health.png', import.meta.url).href},
]])
</script>

<template>
    <div class="menu">
        <div class="logo">
            <img src="@img/logo.png" class="img" />
            <p>农职院宿管系统</p>
        </div>
        <el-scrollbar class="scrollbar">
            <el-menu router unique-opened :default-active="$route.path" background-color="#409EFF" text-color="#FFF" active-text-color="#F8D353">
                <el-menu-item v-for="item in list[user.info.role]" :index="item.path">
                    <img :src="item.icon" class="icon" />
                    <span>{{item.label}}</span>
                </el-menu-item>
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<style scoped lang="less">
.menu {
    .size(200px, 100%);
    .bg(var(--el-color-primary));
    .logo {
        .h(50px);
        .df();
        .f_jc();
        .f_ai();
        .f_ga(10px);
        .c(white);
        .img {
            .size(30px);
        }
    }
    .el-menu {
        .no_bor();
    }
    .scrollbar {
        .icon {
            .size(18px);
            .mar_r(10px);
        }
        .size(100%, calc(100% - 50px));
    }
}
</style>